<template>
  <div>
    <div id="container" style="width: 500px; height: 500px"></div>
    <!-- <div
      id="pie-chart"
      style="width: 400px; height: 400px; display: none"
    ></div> -->
  </div>
</template>

<script>
import beijin from "./city/beijin.json"; //北京
export default {
  name: "",
  components: {}, //组件
  data() {
    return {
      jsonbjData: beijin,
      kysndwdata: [
        {
          ENTNAME: "1",
          SHXYDM: "1",
          LNG: "116.654561",
          LAT: "40.130347",
        },
        {
          ENTNAME: "2",
          SHXYDM: "",
          LNG: "116.608694",
          LAT: "40.113508",
        },
        {
          ENTNAME: "3",
          SHXYDM: "",
          LNG: "116.610524",
          LAT: "40.114522",
        },
        {
          ENTNAME: "4",
          SHXYDM: "",
          LNG: "117.099007",
          LAT: "40.140583",
        },
        {
          ENTNAME: "5",
          SHXYDM: "",
          LNG: "116.506725",
          LAT: "39.795253",
        },
        {
          ENTNAME: "6",
          SHXYDM: "",
          LNG: "116.626701",
          LAT: "39.839069",
        },
        {
          ENTNAME: "7",
          SHXYDM: "",
          LNG: "116.127468",
          LAT: "39.896425",
        },
        {
          ENTNAME: "8",
          SHXYDM: "",
          LNG: "116.641521",
          LAT: "40.045360",
        },
        {
          ENTNAME: "9",
          SHXYDM: "",
          LNG: "116.549876",
          LAT: "40.087888",
        },
        {
          ENTNAME: "10",
          SHXYDM: "",
          LNG: "116.304638",
          LAT: "39.505492",
        },
        {
          ENTNAME: "11",
          SHXYDM: "",
          LNG: "116.516816",
          LAT: "39.781737",
        },
        {
          ENTNAME: "12",
          SHXYDM: "",
          LNG: "116.451416",
          LAT: "39.960933",
        },
        {
          ENTNAME: "13",
          SHXYDM: "",
          LNG: "116.329741",
          LAT: "39.968912",
        },
        {
          ENTNAME: "14",
          SHXYDM: "",
          LNG: "116.366116",
          LAT: "39.988787",
        },
        {
          ENTNAME: "15",
          SHXYDM: "",
          LNG: "116.818087",
          LAT: "40.352771",
        },
        {
          ENTNAME: "16",
          SHXYDM: "",
          LNG: "115.932368",
          LAT: "40.363457",
        },
        {
          ENTNAME: "17",
          SHXYDM: "",
          LNG: "116.435564",
          LAT: "39.556618",
        },
        {
          ENTNAME: "18",
          SHXYDM: "",
          LNG: "116.311658",
          LAT: "39.620381",
        },
        {
          ENTNAME: "19",
          SHXYDM: "",
          LNG: "116.143267",
          LAT: "39.749144",
        },
        {
          ENTNAME: "20",
          SHXYDM: "",
          LNG: "116.557553",
          LAT: "39.774242",
        },
      ],
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    // 地图
    init() {
      // eslint-disable-next-line no-undef
      this.map = new AMap.Map("container", {
        center: [116.0, 39.7],
        zoom: 14,
        // mapStyle: "amap://styles/whitesmoke",
        mapStyle: "amap://styles/blue", //蓝黑色系
      });
      this.Action(this.jsonbjData);
      this.marker();
    },
    // 点位
    marker() {
      let data = this.kysndwdata;
      var marker = [];
      // eslint-disable-next-line no-redeclare
      for (var i = 0, marker; i < data.length; i++) {
        var marker = new AMap.Marker({
          position: [data[i].LNG, data[i].LAT],
          map: this.map,
          offset: new AMap.Pixel(-13, -30),
        });
        this.map.add(marker);
        // marker.setLabel({
        //   offset: new AMap.Pixel(2, -2),
        //   content: i + 1,
        // });
        // marker.content = data[i].ENTNAME;
        marker.content = `
                        <div class="map-info-head">
                        <div class="tit">
                            <span>自定义标题</span>
                        </div>
                        </div>
                        <div class="map-info-content">
                        <div class="content-wxy">
                            <div class='row'>
                               自定义内容：<span class='row-value'>123</span>
                            </div>
                          <div id="pie-chart" style="width: 400px; height: 400px; display: none"></div>
                        </div>
                        </div>
                    </div>`;
        marker.on("click", this.markerClick);
      }
    },
    markerClick(e) {
      console.log(e, "fnasdfiu");
      // 获取点击位置的经纬度
      let lng = e.lnglat.getLng();
      let lat = e.lnglat.getLat();
      // 显示饼图
      // 在点击位置添加标记
      // this.map.clearMap(); // 清除之前的标记
      // let marker = new AMap.Marker({
      //   map: this.map,
      //   position: [lng, lat],
      // });
      // marker.setMap(this.map);
      this.showPieChart(lng, lat);

      var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
      infoWindow.setContent(e.target.content);
      infoWindow.open(this.map, e.target.getPosition());
    },
    showPieChart(lng, lat) {
      // 假设的饼图数据
      let data = [
        { value: 335, name: "直接访问" },
        { value: 310, name: "邮件营销" },
        { value: 234, name: "联盟广告" },
        { value: 135, name: "视频广告" },
        { value: 1548, name: "搜索引擎" },
      ];

      // 初始化饼图
      let myChart = this.$echarts.init(document.getElementById("pie-chart"));
      let option = {
        title: {
          text: "访问来源",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "50%",
            data: data,
            center: [lng, lat],
          },
        ],
      };

      // 显示饼图
      myChart.setOption(option);
      document.getElementById("pie-chart").style.display = "block";
    },
    onCreatePolygon(lnglats) {
      const styleRow = {
        strokeColor: "#2D6AFF",
        strokeOpacity: 0.5,
        strokeWeight: 2,
        fillColor: "rgb(242,242,242)",
        fillOpacity: 0.5,
      };
      const POLY = new AMap.Polygon({
        path: lnglats,
        bubble: true,
        cursor: "pointer",
        map: this.map,
        ...styleRow,
      });
      POLY.on("mouseover", () => {
        POLY.setOptions({
          strokeColor: "#0092bc",
          strokeOpacity: 1,
          strokeWeight: 3,
          fillColor: "rgb(242,242,242)",
          fillOpacity: 0.6,
        });
      });
      this.map.setFitView(POLY); //视口自适应
      POLY.on("mouseout", () => POLY.setOptions(styleRow));
      return POLY;
    },
    Action(json) {
      AMap.plugin("AMap.GeoJSON", () => {
        new AMap.GeoJSON({
          geoJSON: json,
          center: [116.44923, 40.207714],
          // 一级 插旗子
          getPolygon: (area, lnglats) => {
            const Pol = this.onCreatePolygon(lnglats);
            return Pol; // 一定要返回实例 不能删
          },
          // getMarker: function (geojson, lnglats) {
          // },
          // getPolyline: function (geojson, lnglats) {
          // },
        });
        this.map.setFitView(null, false, this.yidong, 10);
      });
    },
  },
  computed: {},
};
</script>
<style scoped lang='less'>
</style>
